// 示例2：用 reactive + watch 实现待办列表
import { reactive, watch, ref } from 'vue';

// 定义待办事项类型
interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

// 创建响应式待办列表
const todoList = reactive<Todo[]>([
  { id: 1, title: '学习Vue 3响应式', completed: false },
  { id: 2, title: '练习组合式API', completed: false },
  { id: 3, title: '掌握TypeScript', completed: true }
]);

// 未完成的任务数量
const remainingCount = ref<number>(0);

// 使用watch监听待办列表变化，更新未完成任务数量
watch(
  () => todoList,
  (newTodos) => {
    remainingCount.value = newTodos.filter(todo => !todo.completed).length;
    console.log(`剩余未完成任务: ${remainingCount.value}`);
  },
  { deep: true, immediate: true } // 深度监听并立即执行一次
);

// 添加新任务
function addTodo(title: string) {
  const newTodo: Todo = {
    id: Date.now(), // 使用时间戳作为唯一ID
    title,
    completed: false
  };
  todoList.push(newTodo);
}

// 切换任务完成状态
function toggleTodo(id: number) {
  const todo = todoList.find(t => t.id === id);
  if (todo) {
    todo.completed = !todo.completed;
  }
}

// 示例使用
export function TodoListDemo() {
  console.log('初始待办列表:');
  console.table(todoList);
  
  // 添加新任务
  addTodo('完成Vue3教程练习');
  
  // 切换任务状态
  toggleTodo(1);
  
  // 显示更新后的列表
  setTimeout(() => {
    console.log('更新后的待办列表:');
    console.table(todoList);
  }, 0);
}